<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="rentform" label-position="right" label-width="auto">
            <EdCreateCard title="车位认证">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <div class="left">
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="状态：">
                                    <el-button class="ed-table-bottom ed_4_border">未认证</el-button>
                                    <!-- <span class="textStyle">{{rentform.status=='0' || '未认证'}}</span> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属项目：">
                                    <span class="textStyle">{{rentform.villageName || '万科嘉园'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="联系人:">
                                    <span class="textStyle">{{rentform.leaserName || '刘亦菲'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话:">
                                    <span class="textStyle">{{rentform.leaserPhone || '17678952345'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="车位编号:">
                                    <span class="textStyle">{{rentform.parkingSpacesNo || 'A25601'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="租金:">
                                    <span class="textStyle">{{rentform.rent+'元/月' || '88元/月'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item label="车位所属:">
                                    <span class="textStyle" v-if="rentform.parkingSpacesBelong==1">物业</span>
                                    <span class="textStyle" v-if="rentform.parkingSpacesBelong==2">住户</span>
                                    <!-- <span class="textStyle">{{rentform.parkingSpacesBelong || '住户'}}</span> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item label="图片:">
                                    <div class="textStyle">
                                    <!-- <div class="textStyle" v-if="rentform.pics.length>0"> -->
                                        <el-image 
                                            v-for="item in rentform.pics"
                                            :key="item"
                                            :src="item" 
                                            :preview-src-list="rentform.pics">
                                        </el-image>
                                    </div>
                                    <!-- <div v-else>-</div> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item label="车位简介:">
                                <span class="textStyle">{{rentform.description || '这里是车位简介'}}</span>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item label="车位认证:">
                                    <el-radio v-model="rentform.status" label='1'>通过</el-radio>
                                    <el-radio v-model="rentform.status" label='2'>不通过</el-radio>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item>
                                    <el-input class="flex-input" placeholder="请输入不通过原因" v-model="rentform.reason"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item >
                                    <div>
                                        <el-button type="info" @click="submit()" class="ed-button ed_black-bottom" >确&nbsp;&nbsp;定</el-button>
                                        <el-button @click="$utilsSet.goBack($router),dialogVisible = false" icon-class="back" class="ed-button ed_white_bottom">取&nbsp;&nbsp;消</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="right">
                        <div class="right_title">进度跟踪</div>
                        <div>
                            <el-timeline :reverse="reverse">
                                <el-timeline-item v-for="(activity, index) in activities" :key="index" color="#EED096" size="large">
                                    <div class="timeline_time">{{activity.createTime}}</div>
                                    <div class="timeline_content">{{activity.message}}</div>
                                    <!-- <div class="timeline_img">
                                        <el-image v-for="(item, index) in activity.images" :key="index"
                                                :src="item" :preview-src-list="[item]" fit="cover">
                                        </el-image>
                                    </div> -->
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                </div>
            </EdCreateCard>
        </el-form>
    </div>
</template>
<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { defineComponent } from 'vue'
    import {getToken} from 'src/utils/auth'
    // import { houseRentInfo,tenantInfo } from "./api";
    import * as api from './api'  
    import EdDialog from 'src/components/EdDialog.vue';
    import ParkingRentDialog from './ParkingRentDialog.vue'
    import { returnName } from "src/utils/common.js";
    import { getDictByCode } from "src/api/dictionaries";
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimeRange, EdSelect, EdDialog,ParkingRentDialog},
        data(){
            return{
                // 租赁信息
                rentform:{
                    id:'',
                    reason:'',
                    status:'',
                    villageName:'',
                    leaserName:'',
                    leaserPhone:'' ,
                    parkingSpacesNo:'',
                    rent:'',
                    parkingSpacesBelong:'',
                    pics:[],
                    description:'',
                    productUrl:''
                },
                reverse: true,
                activities: [],
                // checkParkRentForm:{
                //     reason:'',
                //     id:this.$route.query.id,
                //     status:this.rentform.status
                // },
                isEditting:false,
                action: '',
                headers:{
                    RdAuthorization: getToken()
                },
                dialogImageUrl: '',
                fileList: [],
                dialogVisible: false,
                dialogImageUrl: '',
            }
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";
            // 未认证状态的查看
            if(this.$route.query.id && this.$route.query.parkingStatus==0){
                this.parkRentInfo();
                // this.tenantInfo()
            }
        },
        deactivated(){
            this.rentform={}
            // 清空editor的缓存
            if(this.$refs.EdTinymce) this.$refs.EdTinymce.$children[0].cache = '';
        },
        methods:{
            parkRentInfo(){
                api.parkingRentInfo({id:this.$route.query.id}).then(response => {
                    if(response.success == true) {
                        this.rentform = {
                            id:response.data.id,
                            status:response.data.status,
                            reason:response.data.reason,
                            leaseStatus: response.data.leaseStatus,
                            villageName: response.data.villageName,
                            leaserName: response.data.leaserName,
                            leaserPhone: response.data.leaserPhone,
                            parkingStatus: response.data.parkingStatus,
                            parkingSpacesNo: response.data.parkingSpacesNo,
                            rent: response.data.rent,
                            parkingSpacesBelong: response.data.parkingSpacesBelong,
                            pics: response.data.pics,
                            description: response.data.description,
                        };
                        this.activities = response.data.schedule
                    }
                })
            },
            // 车位认证接口
            submit(){
                this.rentform.id = this.$route.query.id
                    api.checkParkRent(this.rentform).then(res=>{
                        if(res.success){
                            this.$message.success({
                                message: '编辑成功',
                                center: true,
                                duration: 2000,
                            })
                        }
                        this.$router.back()
                        // this.$nextTick(()=>{
                        //     this.$refs.table.load(1,10)
                        // })
                        this.$refs['formRef'].resetFields()
                    })
            }
        },
        
    })
</script>

<style scoped lang="scss">
:deep .batchHandleDialog{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        .el-dialog__body{
            padding-left: 75px;
        }
        .header{
            color: #1E1E1E;
            margin-bottom: 30px;
        }
        .main{
            color: #606266;
        }
}
   :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        .left{
            flex: 2;
            border-right: 1px solid #e5e7eb;
            // border: 1px solid #e5e7eb;
            padding: 0 40px 5px 20px;
        }
        .right{
            flex: 1;
            padding: 5px 20px;
        }
    }
</style>